<template>
    <div id="app">
      <van-nav-bar 
        :title="pageTitle"
        class="nav-bar-custom"
        left-arrow
        @click-left="onBack"
      >
      </van-nav-bar>


      <van-search v-model="searchKeyword" placeholder="请输入搜索内容" />
  
      <div class="bar-chart-container">
        <div class="bar total">
          签到人数 / 报名人数 : {{ stats.signedInUsers }} / {{ stats.totalUsers }} 
        </div>
        <div class="bar-chart">
          <div class="bar signed-in" :style="{width: signedInWidth + '%'}">
            {{ Math.round(stats.signedInUsers / stats.totalUsers * 100) }}%
          </div>
          <div class="bar not-signed-in-text" :style="{width: (100 - signedInWidth) + '%'}">
            {{ 100 - Math.round(stats.signedInUsers / stats.totalUsers * 100) }}%
          </div>
        </div>
      </div>


      <div class="user-list">
        <div class="user-item" v-for="(user, index) in filteredUsers" :key="index">
          <van-image :src="user.avatar" width="50px" height="50px" />
          <div class="user-info">
            <div class="user-name">{{ user.name }}</div>
            <div class="user-status">{{ user.status }}</div>

            <!-- Transition Wrapper for Fade Effect -->
            <div v-if="user.showForm" class="registration-form-container">
              <hr class="separator-line" />
              <div class="registration-form">
                <div v-for="(field, idx) in user.registrationForm" :key="idx">
                  <label>{{ field.label }}: {{ field.value }}</label>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Triangle Toggle -->
          <div class="triangle-toggle" @click="toggleForm(user)">
            <van-icon :name="user.showForm ? 'arrow-down' : 'arrow-left'" />
          </div>
        </div>
      </div>

    </div>
  </template>
  
  <script>
  import { NavBar, Search, Image as VanImage } from 'vant';
  
  export default {
    components: {
      'van-nav-bar': NavBar,
      'van-search': Search,
      'van-image': VanImage
    },
    data() {
      return {
        pageTitle: '活动统计',
        searchKeyword: '',
        users: [
          {
            name: '张三',
            avatar: '/avatars/avatar.jpg',
            status: '已报名',
            showForm: false,
            registrationForm: [
              { label: '学号', value: '151614'},
              { label: '手机号', value: '151614'}
            ]
          },
          {
            name: '李四',
            avatar: '/avatars/avatar.jpg',
            status: '已签到',
            showForm: false,
            registrationForm: [
              { label: '学号', value: '114514'},
              { label: '手机号', value: '114514'}
            ]
          },
          {
            name: '李四',
            avatar: '/avatars/avatar.jpg',
            status: '未签到',
            showForm: false,
            registrationForm: [
              { label: '学号', value: '114514'},
              { label: '手机号', value: '114514'}
            ]
          },
        ],
        stats: {
          totalUsers: 0,
          signedInUsers: 0
        }
      };
    },
    created() {
      this.calculateStats();
    },
    computed: {
      filteredUsers() {
        if (!this.searchKeyword) {
          return this.users;
        }
        return this.users.filter(user => user.name.includes(this.searchKeyword));
      },
      totalWidth() {
        return 100; // 100% width for total users
      },
      signedInWidth() {
        return (this.stats.signedInUsers / this.stats.totalUsers) * 100;
      }
    },

    methods: {
      calculateStats() {
        this.stats.totalUsers = this.users.length;
        this.stats.signedInUsers = this.users.filter(user => user.status === '已签到').length;
      },
      toggleForm(user) {
        user.showForm = !user.showForm;
      },
      onBack() {
        // Logic to go back, usually it's a router back
        this.$router.go(-1);
      },
      // ... any other methods
    }
  }
  </script>
  
  <style scoped>
.user-list {
  padding: 10px;
}

.user-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.user-info {
  margin-left: 15px;
  flex-grow: 1;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
}

.user-status {
  font-size: 14px;
  color: #888;
}

.separator-line {
  margin-top: 10px;
  border: none;
  height: 1px;
  background-color: #eaeaea;
}

.registration-form {
  margin-top: 10px;
}

.registration-form label {
  display: block;
  font-size: 13px;
  color: #666;
}

.triangle-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle-toggle span {
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


.registration-form-container {
  overflow: hidden;
}


.registration-form {
  font-size: smaller; /* Adjust the size as needed */
}

.bar-chart-container {
  margin: 0 10px 0px 10px; /* Adjust margins as needed */
}

.bar-chart {
  position: relative;
  width: calc(100%); /* Adjust 20px to match the margin you have for your content */
  background-color: #add8e6; /* Softer blue color */
  border-radius: 10px;
  overflow: hidden; /* Keeps the children within the rounded corners */
  height: 20px; /* Set a fixed height for the bar */
}

.bar {
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
}

.total {
  width: 100%;
  background-color: transparent;
  font-size: smaller;
  color: black;
  font-weight: bold;
  padding: 0px 0; /* Space above and below the text */
}

.signed-in {
  background-color: #90EE90; /* Softer green color */
  color: grey;
  height: 100%;
  transition: width 0.3s ease; /* Smooth transition for width changes */
  font-size: smaller;
}

.not-signed-in-text {
  position: absolute;
  right: 0; /* Align to the right */
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: grey; /* White color for contrast */
  background-color: transparent; /* No background color */
  transition: width 0.3s ease; /* Smooth transition for width changes */
  font-size: smaller;
}

  </style>
  